<template>
	<view>
		<view class="bg">
			<image v-if="imitateQrcode" class="imitateQrcode" src="../../static/imageCode 7.png" mode=""></image>
			<yuanqi-qr-code class="qrcode" ref="yuanqiQRCode" :text="code_url" :color="color" :size="size"
				:borderSize="borderSize"></yuanqi-qr-code>
			<!-- <image class="qrcode" :src="code_url"></image> -->

			<!-- {text=='二维码已过期'? 'color: #d51f47' : 'color: #643F1D'} -->
			<view class="RefreshQrcodeContainer">
				<view class="title" :style="ColorStyle(text)">{{text}}</view>
				<view class="effectTimeTitle">{{title}}</view>
				<image @click="RefreshQrcode" class="img-889" src="../../static/889.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				id: '',
				merchantId: '',

				obj: {},
				text: '',
				timer: 330,
				disabled: false,
				timerId: '',
				timer2: '',
				title: '二维码生成中，请稍后',
				qrcodeObj: {

				},

				status: '', //二维码状态 

				imitateQrcode: true,
				// 二维码标识串

				code_url: '',
				size: 256,

				bgColor: "#FFFFFF",
				color: "#000000",
				correctLevel: "H",
				correctLevelListIndex: 3,
				borderSize: 40,


				correctLevelList: ["L(7%)", "M(15%)", "Q(25%)", "H(30%)"]
			}
		},
		computed: {
			// 动态设置样式
			ColorStyle() {
				return function(index) {
					return index === '二维码已过期' ? {
						color: '#d51f47'
					} : {
						color: '#643F1D'
					};
				};
			},
		},
		onLoad(options) {
			if (options.id) {
				// 活动id
				this.id = options.id;
			}
			if (options.merchantId) {
				this.merchantId = options.merchantId;
			}
			if (uni.getStorageSync('types') == 1) {
				console.log('商家端')
				this.title = '请在员工端出示二维码!';
			} else {
				this.getQrcode()
				// 需要隐藏 模拟的二维码
				this.imitateQrcode = !this.imitateQrcode

			}

			console.log('第一次调用')
			// 初始化请求
			this.getClean();
		},



		onUnload() {
			this.getClean()

		},

		methods: {


			// 活动轮询
			//获取视频号二维码
			async getQrcode() {
				// uni.showLoading({
				//               title:'1213'

				// })

				const result = await this.$http.post({
					url: this.$api.sphQrCode,

				});


				console.log(result.data.code_url)
				if (result.code == 2000) {
					this.disabled = false;
					uni.hideLoading();
					// 这个是 倒计时 60 的timerId
					this.timerId = setInterval(() => {
						uni.setStorageSync("timerId", this.timerId);
						this.timer--;
						this.title = '二维码有效时间: ' + this.timer + 's'
						if (this.timer == 0) {
							this.status = 5;
							this.disabled = true;
							this.text = "";
							this.title = '二维码已过期,请点击刷新二维码';
							clearInterval(this.timerId);
							clearInterval(this.polling);
						}

					}, 1000);

					this.qrcodeObj = result.data;
					this.code_url = result.data.code_url
					console.log(this.qrcodeObj)
					// 这个是轮询 每3秒进行调用
					this.text = "未扫码";
					this.timer2 = setInterval(() => {

						this.polling = this.timer2;
						uni.setStorageSync("polling", this.polling);
						this.getQrConnect();
					}, 4000);
				} else {
					this.$sun.toast(result.msg);
				}
			},

			//轮询查登录状态
			async getQrConnect() {
				const {
					data: result
				} = await this.$http.get({
					url: this.$api.sphQrStatus,
					data: {

						token: this.qrcodeObj.token,

					}
				});

				if (result.code == 2000) {
					this.status = result.data.status;

					if (result.data.status == 1 && result.data.acctStatus == 1) {


						// console.log(result.data?.cookie)
						const cookie = result.data?.cookie
						uni.setStorageSync('cookie', cookie)
						console.log(cookie)


						// clearInterval(this.polling);

						this.text = "已授权";

						// 授权以后调用 视频号发布
						this.getClean();
						this.title = ''

						const res = await this.$http.post({
							url: this.$api.sphQrIssue,
							data: {
								shopCodeId: this.id,
								merchantId: this.merchantId,
								cookie: cookie
							}
						});

						if (res.code == 2000) {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								success: res => {
									if (res.confirm) {
										uni.navigateBack();
									}
								}
							});
						}else{
							uni.showModal({
								title: '提示',
								content:'res.msg',
								showCancel: false,
								success: res => {
									if (res.confirm) {
									
									}
								}
							});
						}

					}
					if (result.data.status == 0 && result.data.acctStatus == 0) {

						this.text = "未扫码";
						// this.title = '已扫码';
					}

					if (result.data.status == 5 && result.data.acctStatus == 1) {
						this.text = "扫码后未授权";
						// this.title = '二维码已失效,请点击刷新二维码';
					}


				} else {
					this.$sun.toast(result.msg);
				}
				console.log(result.msg, result.code)
				if (result.msg == 'acctStatus' && result.code == 5000) {

					this.text = "二维码已过期";
					this.title = '二维码已过期,请点击刷新二维码';
					clearInterval(this.timerId);
					clearInterval(this.polling);
				}

			},

			// 点击刷新二维码
			RefreshQrcode() {


				if (uni.getStorageSync('types') == 1) {
					this.tips()
				} else {
					this.timer = 330,
						this.getQrcode()
				}

			},
			// 活动预览页面

			tips() {
				this.$sun.toast("此页面为活动预览页!", 'none');
			},
			/*  初始化  */
			getClean() {
				clearInterval(this.timerId);
				clearInterval(this.timer2);


			},
		},

	}
</script>

<style lang="scss">
	.img-889 {
		width: 412rpx;
		height: 88rpx;
		margin-left: 168rpx;
		position: relative;
		z-index: 9;
	}

	.title {

		color: #643F1D;
		text-align: center;
		margin: 72rpx 0 0rpx;
	}

	.effectTimeTitle {
		margin-top: 200px;
		color: #643F1D;
		text-align: center;
		margin: 32rpx 0 28rpx;
	}



	.bg {
		background: url('~static/888.png');
		width: 750rpx;
		height: 1502rpx;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;

	}

	.imitateQrcode {
		width: 334.356rpx;
		height: 337rpx;
		position: absolute;
		top: 608rpx;
		left: 225rpx;
	}

	.qrcode {
		width: 340rpx;
		height: 340rpx;
		margin: 40rpx 0 0 224rpx;
		border-radius: 10rpx;
		position: relative;
		top: 610rpx;
		left: -0px
	}

	.RefreshQrcodeContainer {
		position: relative;
		top: 610rpx;
		left: 15px
	}

	page {
		background-color: #FEC880;
	}
</style>